<template>
  <div class="container" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
    <div>
      <div><img src="../../assets/跳1.png" alt=""></div>
      <div>分站正常 <span style="color: aquamarine;">{{ zc }}</span></div>
    </div>
    <div>
      <div><img src="../../assets/跳2.png" alt=""></div>
      <div>分站异常 <span style="color: red;">{{ yc }}</span></div>
    </div>
  </div>
</template>
<script>
import { FenZhanCount } from '../../https/api/user'
export default {
  data() {
    return {
      zc: '',
      yc: '',
      time: "",
    }

  },
  mounted() {
    this.Onlist()
    this.time = setInterval(() => {
      this.Onlist();
    }, 5000);
  },
  methods: {
    Onlist() {
      FenZhanCount().then(res => {
        console.log(res, '首页分站数量');
        if (res) {
          this.zc = res[0].zc
          this.yc = res[0].yc
        }
      })
    },
    handleMouseEnter() {
      clearInterval(this.time);
    },
    handleMouseLeave() {
      this.time = setInterval(() => {
        this.Onlist();
      }, 1000);
    },
  },
  beforeDestroy() {
    clearInterval(this.time);
  },

}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;

  >div {
    width: 50%;
    height: 100%;
    flex: 1;

    >div:nth-child(1) {
      width: 70%;
      height: 70%;
      margin: 0 auto;

      img {
        width: 100%;
        height: 100%;
        text-align: center;

      }
    }

    >div:nth-child(2) {
      width: 100%;
      text-align: center;
      color: white;

    }
  }
}
</style>
